---
import { Icon } from 'astro-icon/components';
import Logo from '~/components/Logo.astro';
import ToggleTheme from '~/components/common/ToggleTheme.astro';
import ToggleMenu from '~/components/common/ToggleMenu.astro';
import Button from '~/components/ui/Button.astro';
import MenuButton from '~/components/ui/MenuButton.astro';

import { getHomePermalink } from '~/utils/permalinks';
import { trimSlash, getAsset } from '~/utils/permalinks';
import type { CallToAction } from '~/types';

interface Link {
  text?: string;
  href?: string;
  ariaLabel?: string;
  icon?: string;
}

interface ActionLink extends CallToAction {}

interface MenuLink extends Link {
  links?: Array<MenuLink>;
}

export interface Props {
  id?: string;
  links?: Array<MenuLink>;
  actions?: Array<ActionLink>;
  isSticky?: boolean;
  isDark?: boolean;
  isFullWidth?: boolean;
  showToggleTheme?: boolean;
  showRssFeed?: boolean;
  position?: string;
}

const {
  id = 'header',
  links = [],
  actions = [],
  isSticky = false,
  isDark = false,
  isFullWidth = false,
  showToggleTheme = false,
  showRssFeed = false,
  position = 'center',
} = Astro.props;

const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
---

<header id="menu-header" class="overflow-hidden fixed z-10">
  <nav
    id="menu-nav"
    class="w-screen lg:w-auto flex flex-col lg:flex-row-reverse lg:fixed lg:left-0 top-0 lg:h-screen lg:shadow-lg p-4 lg:py-0 lg:px-4 gap-4 overflow-hidden"
  >
    <!-- MENU BUTTON -->
    <div class="col-menu lg:full flex lg:flex-col gap-8 justify-between items-center lg:py-8">
      <a href="/">
        <img
          src="/svg/logo_horizontal.svg"
          alt="logo_horizontal"
          class="h-[6vw] portrait:md:h-[5vw] landscape:md:h-[4vw] lg:hidden"
        />
        <img src="/svg/loco_vertical.svg" alt="loco_vertical" class="hidden lg:block h-52" />
      </a>
      <MenuButton />
      <div id="social_box" class="hidden lg:flex flex-col gap-2">
        <a href="https://wa.me/+524611119439?text=ConsultaWeb" target="_blank">
          <i class="bi bi-whatsapp text-xl text-[#000]"></i>
        </a>
        <a href="https://www.facebook.com/stayloco/" target="_blank">
          <i class="bi bi-facebook text-xl text-[#000]"></i>
        </a>
        <a href="https://www.instagram.com/loco4evercreativision/" target="_blank">
          <i class="bi bi-instagram text-xl text-[#000]"></i>
        </a>
        <a href="https://mx.linkedin.com/company/loco4ever-creativision" target="_blank">
          <i class="bi bi-linkedin text-xl text-[#000]"></i>
        </a>
        <a href="https://www.tiktok.com/@loco4everstudio" target="_blank">
          <i class="bi bi-tiktok text-xl text-[#000]"></i>
        </a>
        <a href="https://youtube.com/@loco4evercreativision75" target="_blank">
          <i class="bi bi-youtube text-xl text-[#000]"></i>
        </a>
      </div>
    </div>

    <!-- MENU OPTIONS -->
    <div
      id="content-menu"
      class="content-menu flex h-fit lg:h-full flex-col justify-center items-end gap-4 lg:pl-24 lg:pr-8"
    >
      {
        links.map(({ text, href }) => (
          <div>
            <a href={href}>{text} 
              <img
                class:list={[
                  'h-4 self-center flecha-menu opacity-zero',
                  { 'active': href === currentPath },
                ]}
                src="/svg/arrow_up_black.svg"
                alt="flecha"
              />
            </a>
          </div>
        ))
      }
    </div>

  </nav>
</header>

<style>
  #menu-nav {
    overflow: hidden;
  }

  .content-menu {
    left: -250px;
    position: absolute;
    transition: right 0.3s linear;
  }

  .content-menu a {
    color: #000;
    display: flex;
    gap: 0.5rem;
  }

  .open {
    left: 0;
    position: relative;
    transition: left 0.3s linear;
  }

  .opacity-zero {
    opacity: 0;
    transition: opacity 0.5s;
  }

  a:hover .opacity-zero {
    opacity: 1;
    transition: opacity 0.5s;
  }

  .active {
    opacity: 1;
  }

  @media screen and (max-width: 1023px) {
    .content-menu {
      top: -100px;
    }

    .content-menu,
    .open {
      transition: top 0.2s linear;
    }

    .open {
      top: 0;
    }

    .opacity-zero-only-mobile {
      opacity: 0;
      transition: opacity 0.5s;
    }
  }

  a {
    font-size: 16px;
  }

  .cols-footer:where(.astro-MTXGG6PP) {
    grid-template-columns: auto auto 1fr 1fr 3fr;
  }

  .logo-footer:where(.astro-MTXGG6PP) {
    grid-row: 1 / span 2;
  }

  .vertical:where(.astro-MTXGG6PP) {
    writing-mode: vertical-rl;
  }

  .vertical:where(.astro-MTXGG6PP),
  .vertical:where(.astro-MTXGG6PP) i:where(.astro-MTXGG6PP) {
    transform: rotate(-180deg);
  }

  .bottom-footer:where(.astro-MTXGG6PP) {
    align-self: flex-end;
    border-top: 1px solid #000;
    display: flex;
    grid-column: 2 / span 4;
    justify-content: space-between;
    width: 100%;
  }

  @media screen and (max-width: 1023px) {
    .cols-footer:where(.astro-MTXGG6PP) {
      grid-template-columns: 1fr 1fr;
    }

    .logo-footer:where(.astro-MTXGG6PP) {
      grid-row: auto;
    }

    .bottom-footer:where(.astro-MTXGG6PP),
    .movil-form:where(.astro-MTXGG6PP) {
      grid-column: 1 / span 2;
    }

    .bottom-footer:where(.astro-MTXGG6PP) {
      flex-direction: column;
    }
  }
</style>
